import React, { useState } from 'react';
import { Row, Col, Card, Button, Tag, Tabs, Image, Modal } from 'antd';
import { 
  AppstoreOutlined, 
  CloudOutlined, 
  MobileOutlined,
  DesktopOutlined,
  SafetyOutlined,
  RocketOutlined,
  EyeOutlined,
  DownloadOutlined
} from '@ant-design/icons';
import styled from 'styled-components';

const PageHeader = styled.div`
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
  margin-top: 64px;
`;

const PageTitle = styled.h1`
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  
  @media (max-width: 768px) {
    font-size: 32px;
  }
`;

const PageSubtitle = styled.p`
  font-size: 20px;
  opacity: 0.9;
  
  @media (max-width: 768px) {
    font-size: 16px;
  }
`;

const Section = styled.div`
  padding: 80px 0;
  
  @media (max-width: 768px) {
    padding: 40px 0;
  }
`;

const ProductCard = styled(Card)`
  height: 100%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-5px);
  }
  
  .ant-card-body {
    padding: 30px;
  }
`;

const ProductImage = styled.div`
  height: 200px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 48px;
  color: #1890ff;
`;

const ServiceCard = styled(Card)`
  text-align: center;
  height: 100%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  
  &:hover {
    transform: translateY(-5px);
  }
  
  .ant-card-body {
    padding: 40px 20px;
  }
`;

const ServiceIcon = styled.div`
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 20px;
`;

const Products: React.FC = () => {
  const [selectedProduct, setSelectedProduct] = useState<any>(null);
  const [modalVisible, setModalVisible] = useState(false);

  const products = [
    {
      id: 1,
      name: '企业管理系统',
      category: '管理软件',
      description: '全面的企业资源管理解决方案，包括人事、财务、库存等模块',
      features: ['用户管理', '权限控制', '数据统计', '报表生成'],
      image: 'https://via.placeholder.com/300x200/1890ff/ffffff?text=ERP',
      price: '¥50,000起',
      tags: ['企业级', '云端部署', '移动端支持']
    },
    {
      id: 2,
      name: '电商平台',
      category: '电商系统',
      description: '功能完整的电商平台，支持多商户、多支付方式、营销活动等',
      features: ['商品管理', '订单处理', '支付集成', '营销工具'],
      image: 'https://via.placeholder.com/300x200/52c41a/ffffff?text=E-commerce',
      price: '¥30,000起',
      tags: ['多商户', '移动端', '营销工具']
    },
    {
      id: 3,
      name: '移动应用',
      category: '移动开发',
      description: '跨平台移动应用开发，支持iOS和Android双平台',
      features: ['原生性能', '跨平台', '离线功能', '推送通知'],
      image: 'https://via.placeholder.com/300x200/722ed1/ffffff?text=Mobile+App',
      price: '¥20,000起',
      tags: ['跨平台', '原生性能', '离线支持']
    },
    {
      id: 4,
      name: '数据分析平台',
      category: '数据服务',
      description: '强大的数据分析平台，提供实时数据监控和智能分析',
      features: ['实时监控', '数据可视化', '智能分析', '预警系统'],
      image: 'https://via.placeholder.com/300x200/fa8c16/ffffff?text=Analytics',
      price: '¥40,000起',
      tags: ['实时分析', '可视化', '智能预警']
    }
  ];

  const services = [
    {
      icon: <AppstoreOutlined />,
      title: '软件开发',
      description: '提供定制化软件开发服务，满足客户的个性化需求'
    },
    {
      icon: <CloudOutlined />,
      title: '云服务',
      description: '提供云计算解决方案，包括云部署、运维和监控服务'
    },
    {
      icon: <MobileOutlined />,
      title: '移动开发',
      description: '专业的移动应用开发服务，支持iOS和Android平台'
    },
    {
      icon: <DesktopOutlined />,
      title: '网站建设',
      description: '现代化的网站设计和开发，提供响应式设计和SEO优化'
    },
    {
      icon: <SafetyOutlined />,
      title: '安全服务',
      description: '提供网络安全评估、漏洞修复和安全培训服务'
    },
    {
      icon: <RocketOutlined />,
      title: '技术咨询',
      description: '专业的技术咨询服务，帮助企业制定技术发展战略'
    }
  ];

  const handleProductClick = (product: any) => {
    setSelectedProduct(product);
    setModalVisible(true);
  };

  const tabItems = [
    {
      key: 'products',
      label: '产品展示',
      children: (
        <Row gutter={[24, 24]}>
          {products.map((product) => (
            <Col xs={24} sm={12} lg={6} key={product.id}>
              <ProductCard
                hoverable
                cover={
                  <ProductImage>
                    <Image
                      src={product.image}
                      alt={product.name}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </ProductImage>
                }
                actions={[
                  <Button 
                    type="link" 
                    icon={<EyeOutlined />}
                    onClick={() => handleProductClick(product)}
                  >
                    查看详情
                  </Button>,
                  <Button 
                    type="link" 
                    icon={<DownloadOutlined />}
                  >
                    下载资料
                  </Button>
                ]}
              >
                <Card.Meta
                  title={product.name}
                  description={
                    <div>
                      <p style={{ color: '#666', marginBottom: 10 }}>
                        {product.description}
                      </p>
                      <div style={{ marginBottom: 10 }}>
                        {product.tags.map((tag, index) => (
                          <Tag key={index} color="blue">{tag}</Tag>
                        ))}
                      </div>
                      <p style={{ color: '#1890ff', fontWeight: 'bold' }}>
                        {product.price}
                      </p>
                    </div>
                  }
                />
              </ProductCard>
            </Col>
          ))}
        </Row>
      )
    },
    {
      key: 'services',
      label: '服务项目',
      children: (
        <Row gutter={[24, 24]}>
          {services.map((service, index) => (
            <Col xs={24} sm={12} lg={8} key={index}>
              <ServiceCard>
                <ServiceIcon>{service.icon}</ServiceIcon>
                <h3 style={{ marginBottom: 16, fontSize: 20 }}>{service.title}</h3>
                <p style={{ color: '#666', lineHeight: 1.6 }}>{service.description}</p>
              </ServiceCard>
            </Col>
          ))}
        </Row>
      )
    }
  ];

  return (
    <div>
      {/* 页面头部 */}
      <PageHeader>
        <div className="container">
          <PageTitle>产品服务</PageTitle>
          <PageSubtitle>为您提供最优质的产品和专业的服务</PageSubtitle>
        </div>
      </PageHeader>

      {/* 产品服务内容 */}
      <Section>
        <div className="container">
          <Tabs 
            defaultActiveKey="products" 
            items={tabItems}
            size="large"
            style={{ marginTop: 20 }}
          />
        </div>
      </Section>

      {/* 产品详情模态框 */}
      <Modal
        title={selectedProduct?.name}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={[
          <Button key="back" onClick={() => setModalVisible(false)}>
            关闭
          </Button>,
          <Button key="contact" type="primary">
            联系我们
          </Button>
        ]}
        width={800}
      >
        {selectedProduct && (
          <div>
            <Row gutter={[24, 24]}>
              <Col span={12}>
                <Image
                  src={selectedProduct.image}
                  alt={selectedProduct.name}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={12}>
                <h3>产品特点</h3>
                <ul>
                  {selectedProduct.features.map((feature: string, index: number) => (
                    <li key={index} style={{ marginBottom: 8 }}>{feature}</li>
                  ))}
                </ul>
                <div style={{ marginTop: 20 }}>
                  <h4>价格</h4>
                  <p style={{ color: '#1890ff', fontSize: 18, fontWeight: 'bold' }}>
                    {selectedProduct.price}
                  </p>
                </div>
                <div style={{ marginTop: 20 }}>
                  <h4>标签</h4>
                  <div>
                    {selectedProduct.tags.map((tag: string, index: number) => (
                      <Tag key={index} color="blue">{tag}</Tag>
                    ))}
                  </div>
                </div>
              </Col>
            </Row>
            <div style={{ marginTop: 24 }}>
              <h3>产品描述</h3>
              <p style={{ lineHeight: 1.6, color: '#666' }}>
                {selectedProduct.description}
              </p>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default Products; 